import { getHospitalShowById } from "@/api/hosp";
import { useEffect, useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { Card, Space, Descriptions, Button } from "antd";
import { useAppDispatch } from "@/store";
import { changeTitle, useCommonState,Tpane,removePanes } from "@/store/modules/common";

export default function Show() {
    const dispatch = useAppDispatch();
    const location = useLocation();
    const id: string = (useParams() as any).id;
    const {panes} = useCommonState();
    // 用于保存详情的状态
    const [info, setInfo] = useState({
        hospital: {
            hosname: "",// 医院名称
            logoData: "",// 医院的LOGO
            hoscode: "",// 医院编码
            "param": {
                "hostypeString": "",// 医院等级
                "fullAddress": ""// 医院地址
            },
            "intro": "",
            "route": "",
        },
        "bookingRule": {
            "cycle": 0,// 预约周期
            "releaseTime": "",// 放号时间
            "stopTime": "",// 停号时间
            "quitDay": -1,
            "quitTime": "",// 退号时间
            // 预约规则 
            "rule": []
        },
    })
    useEffect(() => {
        const getHospitalShowByIdAsync = async () => {
            const info: any = await getHospitalShowById(id);
            dispatch(changeTitle({ pathname: location.pathname, title: info.hospital.hosname }));
            setInfo(info);
        }
        getHospitalShowByIdAsync();
    }, [])
    const navigate = useNavigate();
    return (
        <Space direction="vertical">


            <Button type="primary" onClick={() => {
                // 当前点击关闭标签所在的下标
                const index = panes.findIndex((v: Tpane) => v.key === location.pathname);
                // 删除标签操作
                dispatch(removePanes(index));
                // 进行路由的跳转
                navigate("/hospital/hospitalList");
            }} danger > 关闭返回</Button>
            <Card>
                <Descriptions title="医院基本信息" column={2} bordered>
                    <Descriptions.Item label="医院名称" span={1}>{info.hospital.hosname}</Descriptions.Item>
                    <Descriptions.Item label="医院LOGO"><img width={100} src={"data:image/jpeg;base64," + info.hospital.logoData} alt="" /></Descriptions.Item>
                    <Descriptions.Item label="医院编码">{info.hospital.hoscode}</Descriptions.Item>
                    <Descriptions.Item label="医院地址">{info.hospital.param.fullAddress}</Descriptions.Item>
                    <Descriptions.Item label="乘车路线" span={2}>{info.hospital.route}</Descriptions.Item>
                    <Descriptions.Item label="医院简介" span={2}>{info.hospital.intro}</Descriptions.Item>
                </Descriptions>

            </Card>
            <Card>
                <Descriptions title="医院预约规则信息" column={2} bordered>
                    <Descriptions.Item label="预约周期" span={1}>{info.bookingRule.cycle}</Descriptions.Item>
                    <Descriptions.Item label="放号时间" span={1}>{info.bookingRule.releaseTime}</Descriptions.Item>
                    <Descriptions.Item label="停号时间" span={1}>{info.bookingRule.stopTime}</Descriptions.Item>
                    <Descriptions.Item label="退号时间" span={1}>{info.bookingRule.quitTime}</Descriptions.Item>
                    <Descriptions.Item label="预约规则" span={2}>{info.bookingRule.rule.map((v, index) => (
                        <div key={index}>{v}</div>
                    ))}</Descriptions.Item>
                </Descriptions>
            </Card>
        </Space>

    )
}